class ArcOption {
	/**      
	 * * 构造函数      
	 * * @param {HTMLElement} container - 选项容器元素      
	 * * @param {Object} config - 配置项      
	 * * @param {number} [config.defaultSelected=0] - 默认选中索引      
	 * * @param {function} [config.onOptionSelect] - 选项选中回调      
	 * 
	 */
	constructor(container, config = {}) {
		this.container = container;
		this.data = config.data;
		this.selectedIndex = config.defaultSelected || 0;
		this.onSelectCallback = config.onOptionSelect;
		this.init();
	}
	init() {
		// 初始化DOM结构 
		this.render();
		this.bindEvents();
	}
	render() {
		// 清空容器         
		this.container.innerHTML = '';
		// 创建选项项         
		const fragment = document.createDocumentFragment();
		this.optionItems = [];
		for (let i = 0; i < this.data.length; i++) {
			const item = this.data[i];
			const option = document.createElement('div');
			option.className = 'option-item';
			option.dataset.index = i;
			option.innerHTML = `                 
			<h3 class="title">${item.title}</h3>                 
			<p class="des">${item.description}</p>             `;
			if (i === this.selectedIndex) {
				option.classList.add('selected');
			}
			fragment.appendChild(option);
			this.optionItems.push(option);
		}
		this.container.appendChild(fragment);
	}
	bindEvents() {
		this.container.addEventListener('click', (e) => {
		    const target = e.target.closest('.option-item');//是一个用于DOM操作的方法，主要用于查找与当前元素匹配的最近祖先元素（包括自身）
		    if (target) {
		        const index = parseInt(target.dataset.index);  // 直接使用target而非e.target
		        this.selectOption(index);
		    }
		});

	}
	/**      
	 * * 选中指定选项      
	 * * @param {number} index - 选项索引      
	 * 
	 */
	selectOption(index) {
		// 移除所有选中状态         
		this.optionItems.forEach((item, i) => {
			item.classList.remove('selected');
			if (i === index) {
				item.classList.add('selected');
				this.selectedIndex = index;
				// 触发回调                 
				if (typeof this.onSelectCallback === 'function') {
					this.onSelectCallback({
						index,
						data: this.data[index]
					});
				}
			}
		});
	}
	/**      
	 * * 加载数据      
	 * * @param {Array} data - 选项数据数组      
	 * 
	 */
	update(data) {
		this.data = data;
		this.render();
	}
	/**      
	 * * 销毁组件      
	 *
	 */
	destroy() {
		this.container.removeEventListener('click');
		this.optionItems = null;
	}
}
